<!DOCTYPE html>
<html>

	<head lang="en">
		<title>找攻略</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css"/>
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/strategyComment.css" />
		<link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
		<script src="/js/plugins/jrender/jrender.js"></script>
		<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
		<script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
		<script src="/js/common.js"></script>
		<style>
			#inputDiv {
				height: 45px;
				width: 100%;
				background-color: #eeeeee;
				position: fixed;
				bottom: 0;
			}
			.submitBtn {
				background-color: #a6b4bc;
				color: white;
				width: 100%;
			}

			/*******************************************************/
			.commentofcomment .row{
				margin-bottom: 20px;
			}


			.commentofcomment-date{
				color: #BBBBBB;
				margin-left: 20px;
			}

			.commentofcomment p,.commentofcomment span{
				font-size: 13px;
			}



			.commentofcomment-head img{
				width: 100%;
			}


			@media screen and (max-width: 600px) {
				.commentofcomment-head img {
					width: 130%;
				}
			}

			.follow{
				font-size: 11px;
				padding: 0px 15px;
				margin-left: 15px;
				background: white;
				border: #787a7d solid 1px;
				float: right;
				color: #46484a;
			}

			.authorName{
				margin: 0px;
			}

			.commentofcomment-content {
				margin: 0px;
				padding: 0px;
			}
			.commentofcomment-content p{
				padding: 0px;
				margin: 5px auto 12px ;
			}

			.commentofcomment,.commentofcomment-right{
				padding-right: 0px;
			}

			.tab-pane{
				margin-bottom: 50px;
			}

			.icon{
				float: right;font-size: 10px;
				color: #46484a;
				margin-bottom: 10px;
				margin-top: 5px;
			}

		</style>
		<script>
			var id = getParams().id;
			var currentPage = 1;
			var pages;
			var comments;
			$(function () {
                //发起贾克斯请求,查该点评信息
				$.get("/comments/comment/" + id,function (data) {
                    renderView(data);
                });
				//发送贾克斯请求,获取对该评论的所有评论
				$.get("/comments/commentofcomment/" + id ,{pageSize:5},function (data) {
                    $("#commentNum").html(data.total);
                    pages = data.pages;
					comments = data.list;
					$(".commentofcomment-list").renderValues(data,{
					    handle:function (ele, value) {
                            ele.href = "/userProfiles.html?id=" + value;
                        }
					})
                })
                //设置窗口的滚到事件
                $(window).scroll(function () {
                    if (isEnd()) {
                        if (currentPage < pages) {
                            currentPage++;
                            var args = {currentPage: currentPage, pageSize: 5};
                            $.get("/comments/commentofcomment/" + id , args, function (data) {
                                //数据渲染
                                $.merge(comments, data.list);
                                $(".commentofcomment-list").renderValues({list:comments},{
                                    handle:function (ele, value) {
                                        ele.href = "/userProfiles.html?id=" + value;
                                    }
                                })
                            });
                        } else {
                            $(document).dialog({
                                type : "notice",
                                infoText: "已经没啦!o(*￣▽￣*)o",
                                autoClose: 1500,
                                position: "bottom"
                            });
                        }
                    }
                });
            });
			function renderView(data) {
                $(".comment").renderValues(data,{
                    handle:function (ele, value) {
                        ele.href = "/userProfiles.html?id=" + value;
                    },
                    star:function (ele, value) {
                        $(ele).attr("star",value);
                    },
					strategy:function (ele,value) {
						ele.href="/strategyCatalogs.html?strategyId=" + value;
                    }
                });

                //渲染小星星
                var stars = $(".star");
                $.each(stars,function (index, ele) {
                    var star = $(ele);
                    var num = star.attr("star");
                    for (var i = 0;i < num ;i++) {
                        $("<i class=\"fa fa-star\"></i>").appendTo(star);
                    }
                    for (var i = 0;i < 5 - num ;i++) {
                        $("<i class=\"fa fa-star-o\"></i>").appendTo(star);
                    }
                })
            }
		</script>
	</head>

	<body>
		<div class="search-head">
			<div class="row nav-search">
				<div class="col">
					<a href="javascript:history.go(-1);">
						<span><i class="fa fa-chevron-left"></i></span>
					</a>
				</div>
				<div class="col">
					<span>点评详情</span>
				</div>
				<div class="col"></div>
			</div>
		</div>

			<div class="comment">


			<div class="container ">
				<div class="row">
						<div class="col-2 comment-head">
							<a href="userProfiles.html"  render-key="user.id" render-fun="handle">
								<img class="rounded-circle" render-src="user.headImgUrl">
								<button class="btn" id="followBtn"><i class="fa fa-hand-o-right"> </i> 关注</button>
							</a>
						</div>
						<div class="col">
							<span class="comment-star star" render-key="level" render-fun="star">
								</span>

							<span class="comment-date" render-html="time"></span>
							<div class="comment-content">
								<p render-html="commentText"></p>
							</div>
							<ul class="comment-img" render-loop="imgUrls">
								<li>
									<img  render-src="imgUrls.imgUrl">
								</li>
							</ul>

							<div class="comment-link">
								<a  render-key="strategyId" render-fun="strategy">
									<img  render-src="strategyImg"> <span render-html="strategyTitle"></span>
									<i class="fa fa-angle-right fa-2x"></i>
								</a>
							</div>

						</div>
				</div>
			</div>

			<div class="count d-flex justify-content-between">
					<div class="p-2">评论<span id="commentNum"></span></div>
					<div class="p-2">赞<span >0</span></div>
			</div>

			</div>
		
		<div class="commentofcomment-list">


			<!--快来发表你的评论吧-->
			<div render-loop="list">
				<div class="container row commentofcomment">
					<div class="col-2 commentofcomment-head">
						<a render-key="list.user.id" render-fun="handle">
							<img class="rounded-circle"
								 render-src="list.user.headImgUrl">
						</a>
					</div>
					<div class="col commentofcomment-right">
						<p class="authorName"><span render-html="list.user.nickName"></span></p>
						<span class="commentofcomment-date" render-html="list.time"></span>
						<div class="commentofcomment-content">

								<p render-html="list.content"></p>

						</div>

						<div class="d-flex icon">
							<a >
								<i class="fa  fa-commenting-o " style="margin-right: 10px"> 评论 </i>
								<i class="fa fa-thumbs-o-up"> <span>0</span> </i>
							</a>
						</div>
					</div>
				</div>
			</div>


		</div>

		<div id="inputDiv">
			<div class="row nav-search">
				<div class="col-9">
					<div class="input-group-sm search">
						<input id="msg" class="form-control searchBtn" placeholder="在这里进行评论哦" style="padding-top: 5px" oninput="change()">
					</div>
				</div>

				<div class="col-3">
					<div class="input-group-sm search">
						<button type="button" class="btn btn-sm badge-pill submitBtn">发表评论</button>
					</div>
				</div>
			</div>
		</div>

		<!--<div class="operation">
			<div class="d-flex justify-content-between">
				<div class="p-2"><i class="fa fa-commenting-o"></i> 添加你的评论</div>
				<div class="p-2"><i class="fa fa-star-o"></i> 收藏</div>
			</div>
		</div>-->

		<div id="push"></div>
</body>
<script>
    var id = getParams().id;
    var user = sessionStorage.getItem("user");
    user = JSON.parse(user);
	$(function () {
		$(".submitBtn").click(function () {
            var msg = $("#msg").val();
            if (msg) {
                $.post("/comments/commentofcomment/" + id, {content: msg, "user.id": user.id}, function (data) {
                    if (data.success) {
                        location.reload();
                    }
                })
            }else {

			}
        });
    })
	function change() {
        if ($("#msg").val()){
            $(".submitBtn").css("background-color","#939dff");
        }else {
            $(".submitBtn").css("background-color","#a6b4bc");
        }
    }
</script>

</html>